import React,{Component} from 'react';
import { connect } from 'react-redux'
import styles from './module.scss';
import classnames from 'classnames/bind';
import {Item,Footer,Header} from '../../components';
import {Input,Layout, Menu, Breadcrumb} from 'antd';
import avatar from '../../util/avatars/default.png';
import {moduleName_CN} from '../../util';


let cx = classnames.bind(styles);
const Search = Input.Search;
const { Content} = Layout;


class Module extends Component{
    constructor(props)
    {
        super(props)
        const moduleName = props.match.path.replace('/','');
        this.state={moduleName,data:[]}
    }
    componentWillMount()
    {
       const {data}=this.props
       data.map((d)=>{
            if(d.modulename===this.state.moduleName)
            {
                let array=[];
                d.pages.map((item)=>{
                    if(item.posted===true)
                        array.push(item)
                })
                this.setState({data:array})
            }
       })
    }
    render()
    {
        const go = this.props.history.push;
    return (
        <Layout className="layout">
        <Header go={go}/>
        <Content style={{ padding: '0 50px' }}>
          <div style={{ minHeight: 280 }}>
          <div style={{ minHeight: 650 }}>
              <div className={cx('module')}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                    <Breadcrumb.Item onClick={()=>{go('/')}}>所有集合</Breadcrumb.Item>
                    <Breadcrumb.Item>{moduleName_CN[this.state.moduleName]}</Breadcrumb.Item>
                </Breadcrumb>
                 {
                    this.state.data.map((c,index)=>{
                        let author=['Admin'];
                        return (
                            <div style={{marginTop:'1rem'}} key={index}>
                                <Item  data={{...c,avatar:[avatar],author}} onClick={()=>go(`/${this.state.moduleName}/${c.contentid}`)}/>
                            </div>
                        )
                    })
                }
              </div>
          </div>
          </div>
        </Content>
        <Footer tips='微人事帮助中心'>
          微人事帮助中心
        </Footer>
    </Layout>
    )
    }
}

export default connect(
    state => ({data: state.data})
)(Module)
